<template>
    <DashboardFrame class="dashboard-frame">
        <Widget1 class="absolute top-[92px] left-[61px] h-[926px] w-[1798px]" @select="videoHDRef?.play($event)"/>
        <div class="absolute top-[111px] left-[42px] h-[916px] w-[452px] blur-bg"></div>
        <div class="absolute top-[111px] left-[1426px] h-[916px] w-[452px] blur-bg"></div>
        <div class="absolute top-[705px] left-[518px] h-[320px] w-[884px] blur-bg"></div>
        <Widget2 class="absolute top-[111px] left-[1426px] h-[916px] w-[452px]" @select="videoHDRef?.play($event)"/>
        <Widget3 class="absolute top-[111px] left-[42px] h-[216px] w-[452px]" />
        <Widget4 class="absolute top-[327px] left-[42px] h-[173px] w-[452px]" />
        <Widget5 class="absolute top-[500px] left-[42px] h-[206px] w-[452px]" />
        <Widget6 class="absolute top-[706px] left-[42px] h-[321px] w-[452px]" />
        <Widget7 class="absolute top-[705px] left-[518px] h-[320px] w-[884px]" />
        <Widget8 class="absolute top-[115px] left-[510px] h-[569px] w-[900px]" ref="videoHDRef"/>
    </DashboardFrame>
</template>
<script lang="ts">
export default defineComponent({
    name: 'dashboard'
})
</script>

<script setup lang="ts">
import { ref, defineComponent } from 'vue'
import DashboardFrame from './DashboardFrame/index.vue'
import Widget1 from './地图/index.vue';
import Widget2 from "./监控视频/index.vue";
import Widget3 from './设备统计/index.vue';
import Widget4 from './人员进入/index.vue';
import Widget5 from './今日进入数量/index.vue';
import Widget6 from './车辆出入/index.vue';
import Widget7 from './事件管理/index.vue';
import Widget8 from './高清监控视频/index.vue';
const videoHDRef = ref<InstanceType<typeof Widget8>>()
</script>

<style scoped>
.dashboard-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #02050E;
}

.blur-bg {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}
</style>